<template>
  <div class="people">
    <!-- 个人中心 -->
    <h1 style="text-align: center">个人中心</h1>
    <div class="body">
      <!-- 左侧 -->
      <div class="left">
        <div class="top">
          <span
            style="
              background-color: #2d8092;
              height: 20px;
              width: 100%;
              color: white;
            "
            >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;个人中心&emsp;&emsp;&emsp;&emsp;&emsp;
            &emsp;&nbsp;&nbsp;</span
          ><br /><br />
          <img src="./莎头.jpg" style="width: 100px; height: 100px" /><br /><br>
          <span>姓名：{{ xingming }}</span
          ><br /><br />
          <span>昵称：{{ nicheng }}</span
          ><br /><br />
          <span>性别：{{ xingbie == 0 ? "男" : "女" }}</span
          ><br /><br />
          <span>电子邮箱：{{ eml }}</span><br><br>
          <span>手机号：{{ shoujihao }}</span>
        </div>
        <div class="bottom">
          <br />
          <span
            >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;修改资料&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span
          ><br /><br />
          <span
            >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;个人资料&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span
          ><br /><br />
          <span
            >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;教学管理&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span
          >
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <span
          style="
            background-color: #2d8092;
            height: 22px;
            width: 100%;
            color: white;
          "
          >&emsp;个人资料&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&nbsp;</span
        >
        <div class="conter" style="margin: auto">
          <form>
            <label>&emsp;&emsp;姓名:&emsp;</label
            ><input
              type="text"
              v-model="name"
              placeholder="请输入姓名"
              style="width: 200px"
            /><br /><br />
            <label>&emsp;&emsp;昵称:&emsp;</label
            ><input
              type="text"
              v-model="nick"
              placeholder="请输入昵称"
              style="width: 200px"
            /><br /><br />
            <label>&emsp;&emsp;性别:&emsp;</label>
            <el-radio-group v-model="gender">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio> </el-radio-group
            ><br /><br />
            <label>出生年月:&emsp;</label
            ><el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="birthday"
            ></el-date-picker
            ><br /><br />
            <label>联系电话:&emsp;</label
            ><input
              type="text"
              v-model="phone"
              placeholder="请输入联系电话"
              style="width: 200px"
            /><br /><br />
            <label>电子邮箱:&emsp;</label
            ><input
              type="text"
              v-model="email"
              placeholder="请输入电子邮箱"
              style="width: 200px"
            /><br /><br />
            <label>自我简介:&emsp;</label
            ><textarea
              v-model="introduction"
              placeholder="请输入自我简介"
              style="width: 400px"
            ></textarea
            ><br /><br />
            <el-button
              type="success"
              plain
              style="margin-left: 200px"
              @click="updateInfo()"
              >保存</el-button
            >
          </form>
        </div>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "APP",
  data() {
    return {
      userInfo: {},
      name: "",
      nick: "",
      gender: "",
      birthday: "",
      phone: "",
      email: "",
      introduction: "",
      // 个人中心
      xingming: "",
      nicheng: "",
      xingbie: "",
      shoujihao: "",
      eml:''
    };
  },
  methods: {
    updateInfo() {
      localStorage.setItem("name", this.name);
      localStorage.setItem("nick", this.nick);
      localStorage.setItem("gender", this.gender);
      localStorage.setItem("birthday", this.birthday);
      localStorage.setItem("phone", this.phone);
      localStorage.setItem("email", this.email);
      localStorage.setItem("introduction", this.introduction);
      this.$message({
        message: "修改成功",
        type: "success",
      });
      this.userInfo = localStorage.getItem("userInfo")
      this.xingming = localStorage.getItem("name")
      this.nicheng = localStorage.getItem("nick")
      this.xingbie = localStorage.getItem("gender")
      this.shoujihao = localStorage.getItem("phone")
      this.eml = localStorage.getItem("email")
      // 清空表单
      this.name = "";
      this.nick = "";
      this.gender = "";
      this.birthday = "";
      this.phone = "";
      this.email = "";
      this.introduction = "";
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.people {
  background-image: url(../assets/desk.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
h1 {
  font-size: 40px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  text-align: center; /* 保持居中对齐 */
}

.body {
  width: 950px;
  height: 586px;
  margin: auto;
  background-color: rgba(242, 245, 238, 0.8); /* 背景半透明 */
  border: 1px solid rgba(0, 0, 0, 0.5); /* 边框半透明 */
  display: flex; /* 使用flex布局 */
  align-items: flex-start; /* 垂直对齐到顶部 */
}

.left {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.right {
  width: 645px;
  height: 100%;
  margin-left: 5px;
  display: flex;
  border: 1px solid #2c7f91;
  text-align: left;
  flex-direction: column; /* 垂直排列子元素 */
}

.top {
  text-align: center;
  border: 1px solid #2c7f91;
  margin-bottom: 20px; /* 添加间距 */
}

.bottom {
  text-align: center;
  cursor: pointer;
  border: 1px solid #2c7f91;
  margin-top: 20px;
}
.bottom span {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #2c7f91;
  color: #368ea1;
}
</style>
